import 'package:flutter/material.dart';
import 'package:flutterapp/utils/charts.dart';
import 'package:flutterapp/components/underlineWithTitle.dart';
import 'package:audioplayers/audioplayers.dart';
import 'package:audioplayers/audio_cache.dart';

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _imageSrc = 'assets/images/new-ai.png';

  List<String> get vowels => Charts.getVowels();
  List<String> get consonant => Charts.getConsonant();
  final AudioCache audioCache = AudioCache();

  void _changeImageSrc(src) {
    setState(() {
      _imageSrc = 'assets/images/' + src;
    });
  }

  Container image() {
    return Container(child: Image.asset(this._imageSrc), height: 200);
  }

  Container elementButtons(List<String> items, String title) {
    List<Container> buttons = [];
    for (int i = 0; i < items.length; i++) {
      Container btn = Container(
        child: TextButton(
          child: Text(items[i],
              style: TextStyle(
                  fontSize: 20, color: Color.fromRGBO(255, 255, 255, 1))),
          onPressed: () async {
            await audioCache.play('sounds/' + Charts.getMP3(items[i]));
            _changeImageSrc(Charts.getImg(items[i]));
          },
        ),
        width: 50,
        height: 50,
        margin: EdgeInsets.all(5),
        alignment: Alignment.center,
        decoration: new BoxDecoration(
            color: Color.fromRGBO(114, 50, 221, 1),
            borderRadius: BorderRadius.all(const Radius.circular(25))),
      );
      buttons.add(btn);
    }
    return Container(
      child: Column(
        children: [UnderlineWithTitle(title: title), Wrap(children: buttons)],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return
      Container(height: MediaQuery.of(context).size.height,child:Scrollbar(
        child: SingleChildScrollView(
        child:Container(
          color: Colors.white,
          height: MediaQuery.of(context).size.height,
          child: Column(
            children: [
              image(),
              this.elementButtons(vowels, '元音'),
              this.elementButtons(consonant, '辅音')
            ],
          ),
        ))
    ));
  }
}
